<template>
  <div class="scoreConfig">
    <div class="card1 bgfff">
      <div class="lineTitle">
        <div class="line"></div>
        <span>系统积分</span>
      </div>
      <div class="inputBox">
        积分汇率：1元 ≈
        <el-select v-model="form.rate" placeholder="请选择" size="small">
          <el-option label="1积分" value="1"></el-option>
          <el-option label="10积分" value="10"></el-option>
          <el-option label="100积分" value="100"></el-option>
          <el-option label="1000积分" value="1000"></el-option>
        </el-select>
      </div>
    </div>
    <div class="card2 bgfff">
      <div class="lineTitle">
        <div class="line"></div>
        <span>积分有效期</span>
      </div>
      <div class="inputBox">
        <div>
          积分有效期至：
          <el-date-picker
            @change="onChange"
            v-model="form.cut_date"
            align="right"
            type="date"
            format="M月d日"
            value-format="MM-dd"
            placeholder="选择日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <div>
          积分过期提醒时间：
          <el-date-picker
            v-model="form.warn_date"
            align="right"
            type="date"
            format="MM月dd日"
            value-format="MM-dd"
            placeholder="选择日期"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="tips">
        说明：每年{{
          form.cut_date
        }}将清空所有用户账户余额（上年度1月1日~12月31日获得的全部积分）
      </div>
    </div>
    <div class="card3 bgfff">
      <div class="lineTitle">
        <div class="line"></div>
        <span>积分年度投入预算总额</span>
      </div>
      <div class="inputBox">
        积分本年预算总额：
        <el-input
          oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
          v-model="form.total_amount"
          @blur="form.total_amount = $event.target.value"
          size="small"
        ></el-input>
      </div>
    </div>
    <div class="card4 bgfff">
      <div class="lineTitle">
        <div class="line"></div>
        <span>用户积分使用说明</span>
      </div>
      <div class="inputBox">
        说明内容：
        <el-input
          v-model="form.explain"
          type="textarea"
          :autosize="{ minRows: 5 }"
          size="small"
        ></el-input>
      </div>
    </div>
    <el-button type="primary" size="small" @click="submit">保存配置</el-button>
  </div>
</template>

<script>
import { SaveScoreConfig, getScoreConfig } from "@/api/score";
export default {
  name: "",
  props: [""],
  data() {
    return {
      form: {
        year: "",
        rate: "",
        cut_date: "",
        warn_date: "",
        total_amount: 0,
        explain: "",
      },
      cutDataTxt: "x月x日",
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    let myDate = new Date();
    this.form.year = myDate.getFullYear();
    this.getInfo();
  },

  methods: {
    onChange(val) {
      if (val) this.cutDataTxt = this.$moment(val, "MM-DD").format("M月D日");
      else this.cutDataTxt = "x月x日";
    },
    getInfo() {
      getScoreConfig({ year: this.form.year }).then((res) => {
        if (res.code == 200) {
          if (Object.keys(res.data).length != 0) {
            //如果有数据说明保存过数据,则回显数据;
            this.form.cut_date = res.data.cut_date;
            this.form.warn_date = res.data.warn_date;
            this.form.rate = res.data.rate;
            this.form.total_amount = res.data.total_amount;
            this.form.explain = res.data.explain;
          }
        }
      });
    },
    submit() {
      // console.log(this.form, ">>>>>form");
      SaveScoreConfig(this.form).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getInfo();
        }
      });
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.scoreConfig {
  .card1 {
    margin-bottom: 14px;
    padding: 24px 0 0 24px;
    height: 122px;
    .inputBox {
      margin-top: 20px;
    }
  }
  .card2 {
    margin-bottom: 14px;
    padding: 24px 0 0 24px;
    height: 173px;
    .inputBox {
      display: flex;
      align-items: center;
      margin-top: 20px;
      > div {
        margin-right: 140px;
      }
    }
    .tips {
      margin-top: 16px;
      padding: 0 10px;
      line-height: 35px;
      color: #8caefa;
      background: rgba(43, 105, 242, 0.06);
    }
  }
  .card3 {
    margin-bottom: 14px;
    padding: 24px 0 0 24px;
    height: 122px;
    .inputBox {
      display: flex;
      align-items: center;
      margin-top: 20px;
      /deep/.el-input {
        width: 300px;
      }
    }
  }
  .card4 {
    margin-bottom: 14px;
    padding: 24px 0 0 24px;
    height: 220px;
    .inputBox {
      display: flex;
      margin-top: 20px;
      /deep/.el-textarea {
        width: calc(90%);
      }
    }
  }
}
</style>
